<template>
  <section style="min-width:1300px">

    <enHeader2></enHeader2>
    <div class="container">
      <div class="top">
        <img src="./../../image/pic24.png"
             alt=""
             srcset="">
        <div class="r1">
          <p class="p1">Welcome to Ruili Bank</p>
          <p class="p2">Enjoy more convenient and efficient financial services</p>
          <div class="searchBox">
            <input type="text"
                   @keyup.enter="search"
                   placeholder="Search keywords"
                   v-model="text">
            <img src="./../../image/pic22.png"
                 alt=""
                 srcset=""
                 class="pointer"
                 @click="search">
          </div>
        </div>
      </div>

      <div class="center"
           v-if="show">
        <p class="p1">We find the results for you：</p>
        <p class="p1"
           v-if="!list"
           style="font-size:25px">The corresponding result has not been matched yet.</p>
        <ul>
          <li v-for="(item,i) in list"
              @click="gotoArticle(item)"
              :key="i">
            <p class="pp1"
               v-html="linghightText(item.title)">

            </p>
            <p class="border"></p>
          </li>
          <!-- <li>
            <p class="pp1">
              瑞丽信用贷款是个人贷款还是企业贷款
            </p>
            <p class="pp2">
              加上来得及拉三季度奥斯卡的考虑sad阿斯加德拉克丝建档立卡数据来看大家缴费基数点击发送放假哈时代峻峰had回房间卡士大夫换了卡都是还是打款发货回房间卡士大夫换了卡都是还是打款发货回房间卡士大夫换了卡都是还是打款发货回房间卡士大夫换了卡都是还是打款发货回房间卡士大夫换了卡都是还是打款发货
            </p>
            <p class="border"></p>
          </li> -->
        </ul>
      </div>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="nextPageNo"
                     :page-size="10"
                     class="pagination"
                     layout="prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <enFooter></enFooter>
  </section>
</template>

<script>
import { Table, TableColumn, Pagination, Loading } from 'element-ui'
import { mapState } from "vuex";
export default {
  name: "search",
  data () {
    return {
      text: "",
      list: [],
      show: false,
      total: 0,
      nextPageNo: 1
    };
  },
  components: {
    elTable: Table,
    elTableColumn: TableColumn,
    elPagination: Pagination,
  },
  created () {
    let text = this.$route.query.searchText
    if (text) {
      this.text = text
      this.search(text)
    }
  },
  methods: {
    handleSizeChange () {

    },
    handleCurrentChange (v) {
      this.nextPageNo = v
      this.search()
    },
    gotoArticle (v) {
      let obj = {
        myvuex: {
          books: "Search result"
        },
      };
      this.$store.commit('stateFn', obj.myvuex.books);
      sessionStorage.setItem("books", "Search result")
      this.tourl("/front/article?articleId=" + v.id)
    },
    linghightText (str) {
      let tempText = `<span style="color:red">${this.text}</span>`;
      let res = str.replace(new RegExp(this.text, 'g'), tempText)
      return res;
    },
    search () {
      let self = this;
      let loadingInstance = Loading.service({
        fullscreen: true,
        text: "loading···"
      });
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.search,
          mode: "post",
          data: {
            nextPageNo: this.nextPageNo,
            condition: self.text
          }
        },
        function (suc) {
          self.list = suc.data.result
          loadingInstance.close();
          self.total = suc.data.total
        },
        function (err) {
          loadingInstance.close();
        }
      );
      this.show = true
    }
  }
};
</script>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
.center {
  width: 100%;
  box-sizing: border-box;
  .p1,
  .pp1,
  .pp2 {
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
  }
  .p1 {
    color: black;
    font-size: 28px;
    margin-bottom: 20px;
  }
  .pp1 {
    font-size: 22px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .pp2 {
    font-size: 16px;
    margin: 10px 0;
  }
  .border {
    height: 0;
    border-bottom: 1px dashed #bfbfbf;
  }
  li {
    margin-bottom: 20px;
  }
}
.r1 {
  width: 500px;
  float: left;
  margin-left: 630px;
  box-sizing: border-box;
  padding-top: 150px;
  text-align: center;
  .p1 {
    font-size: 46px;
    color: black;
  }
  .p2 {
    font-size: 19px;
    color: #999999;
    margin-top: 10px;
    margin-bottom: 50px;
  }
}
.top {
  position: relative;
  height: 500px;
  img {
    width: 500px;
    height: auto;
    position: absolute;
    top: 40px;
    left: 80px;
    z-index: 40;
  }
  .pointer {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 13px;
    left: 450px;
  }
}
.container {
  width: 1300px;
  margin: 0 auto;
  overflow-x: hidden;
}
.searchBox {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  box-sizing: border-box;
  // margin: 0 3.17% 0 0;
  border: 1px solid #999999;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  position: relative;
  input {
    width: 90%;
    border: none;
    height: 100%;
    background-color: transparent;
    color: black;
  }
  input::-webkit-input-placeholder {
    color: #787878;
  }
  input::-moz-input-placeholder {
    color: #787878;
  }
  input::-ms-input-placeholder {
    color: #787878;
  }
}
</style>